<script>
import Component from "vue-class-component";
import BaseDialog from "@/components/BaseDialog/index.vue";
import { getConfig, saveConfig } from "@/api";
import { LocaleMixin } from "@/mixins/locale";
import { ref } from "@vue/composition-api";
@Component({
  name: "ConfigDialog",
  mixins: [LocaleMixin],
  setup() {
    const form = ref(null);
    return {
      form
    };
  }
})
export default class ConfigDialog extends BaseDialog {
  get title() {
    var action = this.model.id
      ? this.$t("config.dialog.title.edit")
      : this.$t("config.dialog.title.create");
    return action + this.$t("config.dialog.title.content");
  }

  get confirmBtnText() {
    return this.$t("config.dialog.footer.submit");
  }

  get cancelBtnText() {
    return this.$t("config.dialog.footer.cancel");
  }

  categoryOptions = [];

  model = {
    // code: "",
    cat: "",
    ch: "",
    en: ""
  };

  get config() {
    return {
      labelWidth: this.locale == "zh-CN" ? 100 : 125,
      labelSuffix: ":"
    };
  }

  async onSubmit() {
    if (!this.form || !this.form.validForm()) {
      return;
    }
    let resp = await saveConfig({
      // id: this.model.code,
      ch: this.model.ch,
      name: this.model.en,
      cat: this.model.cat
    });
    if (resp && resp.code == 0) {
      this.$message.success(this.$t("message.successfulSave"));
      this.$emit("change");
      this.closeDialog();
    } else {
      this.$message.success(resp.data.msg);
    }
  }

  async getData() {
    let resp = await getConfig();
    if (resp && resp.data) {
      var data = resp.data[this.locale];
      this.categoryOptions = Object.keys(data).map(x => {
        return {
          label: x,
          value: x
        };
      });
    }
  }

  mounted() {
    this.getData();
  }

  get props() {
    return {
      cat: {
        label: this.$t("config.dialog.form.cat"),
        tag: "el-select",
        placeholder: this.$t("config.dialog.form.catPlaceholder"),
        options: this.categoryOptions,
        style: {
          width: "100%"
        },
        rules: {
          required: true,
          message: this.$t("config.dialog.form.catError")
        }
      },
      // code: {
      //   label: this.$t("config.dialog.form.code"),
      //   placeholder: this.$t("config.dialog.form.codePlaceholder"),
      //   tag: "el-input"
      // },
      ch: {
        label: this.$t("config.dialog.form.ch"),
        placeholder: this.$t("config.dialog.form.chPlaceholder"),
        tag: "el-input",
        rules: {
          required: true,
          message: this.$t("config.dialog.form.chError")
        }
      },
      en: {
        label: this.$t("config.dialog.form.en"),
        placeholder: this.$t("config.dialog.form.enPlaceholder"),
        tag: "el-input",
        rules: {
          required: true,
          message: this.$t("config.dialog.form.enError")
        }
      }
    };
  }

  renderBody(h) {
    return (
      <base-form
        v-model={this.model}
        ref="form"
        {...{
          props: {
            props: this.props,
            config: this.config
          }
        }}
      ></base-form>
    );
  }
}
</script>
